<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:v="https://svgstorm.com"
    :viewBox="viewBox"
    :width="viewportWidth"
    :height="calculatedHeight"
  >
    <g :fill="color" fill-opacity="1.00" stroke="None">
      <path
        d="
M 220.00 107.00 
L 699.00 107.00
C 631.01 58.33 559.44 4.00 473.00 0.00
L 459.00 0.00
C 369.30 6.45 297.77 68.21 220.00 107.00 Z"
      />
    </g>

    <g :fill="color" fill-opacity="1.00" stroke="None">
      <path
        d="
M 1825.00 107.00 
L 1920.00 107.00
L 1920.00 31.00
C 1888.16 55.57 1857.33 83.28 1825.00 107.00 Z"
      />
    </g>
    <g :fill="color" fill-opacity="1.00" stroke="None">
      <path
        d="
M 1049.00 107.00 
L 1374.00 107.00
C 1273.55 64.06 1148.71 58.11 1049.00 107.00 Z"
      />
    </g>
  </svg>
</template>

<script>
export default {
  props: {
    color: {
      default: "#c34f3d",
    },
  },
  data() {
    return {
      calculatedHeight: "107",
      viewportWidth: "1920",
      viewBox: "0 0 1920 107",
    };
  },
  mounted() {
    this.calculateHeight();
    window.addEventListener("resize", this.calculateHeight);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器
    window.removeEventListener("resize", this.calculateHeight);
  },
  methods: {
    calculateHeight() {
      this.viewportWidth = document.body.clientWidth;
      const originalAspectRatio = 1920 / 107;
      this.calculatedHeight = this.viewportWidth / originalAspectRatio;
      this.viewBox = `0 0 ${this.viewportWidth} ${this.calculatedHeight}`;
    },
  },
};
</script>

<style></style>
